<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .wrapper {
            width: 300px;
            height: 300px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="wrapper">
    </div>

    <script>

        var wrapper = document.getElementsByClassName('wrapper')[0];
        // div上没有绑定事件，但是当点击它时还是会触发，并且冒泡
        document.onclick = function(){ // document的范围是整个画布
            console.log('你闲的啊');
        }

        wrapper.onclick = function(e) {
            //  console.log(e);
            // e.stopPropagation(); //取消冒泡事件, w3c标准
            // e.cancelBubble = true; //IE独有,现在谷歌也好使，默认是false
            stopBubble(e);
            this.style.backgroundColor = '#2299ff';
        }


        // 封装函数，取消冒泡
        function stopBubble(event){
            if(event.stopPropagation){
                event.stopPropagation();
            }else{
                event.cancelBubble = true;
            }
        }
    </script>

</body>
</html>